<template>
	<div class=" minHeight" v-loading="loading">
	 <div v-if="data.length>0">
		<div v-for="(item,index) in data" :key="index" class="answer-box">
		  <div class="flex">
		    <img :src="item.avatar" style="border-radius:50%;" v-if="item.avatar" >
			<img :src="userImg" style="border-radius:50%;" v-if="!item.avatar">
		    <div class="ml-3 flex-1">
		      <h1>{{item.answerContent}}</h1>
					<!-- <div class="teacher">
						<span>专家回答/{{item.children[0].userName}}：{{item.children[0].answerContent}} {{item.children[0].updateTime}}</span>
					</div> -->
					<div>
						<div class="teacher" v-for="(answer,index1) in item.children" :key="index1">
							<span><span style="color: #0068B6;font-weight: 600;">专家回复/{{answer.userName}}</span>：
							<span>{{answer.answerContent}}</span></span>
						</div>
					</div>
		      <div class="dl-row-sb center">
		        <div class="dl-row center" style="margin-top: 5px;">
					<el-button v-if="courseChapteId" @click="answerQue(item.id)" round size="mini" type="primary" plain>+&nbsp;专家回复</el-button>
		            <span class="data" style="color: #0068B6;">{{item.children.length}}&nbsp;回答</span>
					<span class="data chapterClass">对应章节：{{item.chapterName}}</span>
<!-- 					<el-button type="text" size="mini" @click="lookAll(item.id)" icon="el-icon-view">查看全部</el-button>
					<el-button type="text" size="mini" @click="close(item.id)"  icon="el-icon-arrow-up">收起</el-button> -->
		        </div>
		        <span class="ml-auto">{{item.updateTime}}</span>
		      </div>
		    </div>
		  </div>
		</div>
		<el-pagination
				:total="total"
				:current-page="page + 1"
				style="margin-top: 8px;"
				layout="total, prev, pager, next, sizes"
				@size-change="sizeChange"
				@current-change="pageChange"/>
	 </div>	
	<div v-if="data.length==0 &&!loading">
	   <el-empty :image-size="250" :image="require('../../../assets/no_data_images/no_chapter.png')" class="empty" description="无数据"></el-empty>
	</div>
	<answer-form ref="answerFroms"></answer-form>
	</div>
</template>

<script>
	import initData from '@/mixins/initData'
	import answerForm from './answerForm.vue'
	export default {
	  components:{
		  answerForm
	  },	
	  mixins: [initData],
	  data() {
		return {
			courseId: this.$route.query.courseId,
			courseChapteId: this.$route.query.id,
			showId:"",
			isAll:false,
		    loading:false,
			userImg: require('../../../assets/image/u353.png'),
		    recommendIndex: 0,
		}
	  },
	  watch:{
		  total(newValue,oldValue){
			  this.getData();
		  }
	  },
	  created() {
	  	this.$nextTick(() => {
			this.init()
	  	})
	  },
	  methods: {
		beforeInit() {
		    this.url = 'web/answer/page-no-answer-list-pc'
		    this.params = {
		      page: this.page,
		      size: this.size,
		      courseId: this.courseId
		    }
		    return true
		},
		getData(){
			this.$nextTick(() => {
				this.$emit('noAnswerNumData', this.total);
			})
		},
		lookAll(id){
			this.showId=id;
			this.isAll=true
		},
		close(id){
			this.showId=id;
			this.isAll=false
		},
		answerQue(answerId){
			this.$refs.answerFroms.dialog = true
			this.$refs.answerFroms.form.pid = answerId
			this.$refs.answerFroms.form.courseId = this.courseId
			this.$refs.answerFroms.form.chapterId = this.$route.query.id
			this.$refs.answerFroms.form.type = 2
			
		}
	  },
	}
</script>

<style scoped>
	.empty{
		 height: calc(100vh - 435px);
	}
	.minHeight{
		min-height: calc(100vh - 554px);
	}
	.chapterClass{
		text-overflow: ellipsis;
		overflow: hidden;
		width: 380px;
		white-space: nowrap;
	}
</style>